<template>
	<view class="dialog" :class="{'dc':type == 'center','mat':type == 'top'}" style="" @touchmove.prevent >
        <view class="tou_dialog" @click="close">
            
        </view>
        <view class="status_box" :class="{'dialogTop':type == 'top'}" v-if="tradePasswordType == 2" @touchmove.prevent>
            <view class="status_bg">
                <image  src="../../../../static/syFactory/kuan.png" mode=""></image>
            </view>
            <view class="status_ma">
                <image class="img" src="../../../../static/syFactory/xiao_logo.png" mode=""></image>
                <text>确认销毁</text>
                <view class="succesImg">
                    <image class="b_kuan" src="../../../../static/syFactory/b_kuan.png" mode=""></image>
                    <image class="coverImg" :src="data.cover" mode="" ></image>
                </view>
                <view class="tips">
                    <view class="">销毁数量：{{xNum}}</view>
                    <view class="">销毁奖励：{{xMoney}}通分</view>
                </view>
            </view>
            <view class="status_btn" v-if="type == 'center'">
                <view class="btn"  @click="pay">确认销毁</view>
            </view>
        </view>
		<view class="dialogBox" :class="{'dialogTop':type == 'top'}" v-if="tradePasswordType == 1">
			<view class="coding_box">
				<view class="title"></view>
				<view class="closeItem" @click="close">X</view>
				<view class="coding_box_item coding_box_item_no">
					您还未设置积分交易密码请先前往设置
				</view>
				<view class="but_no" @click="setPassword">
					设置交易密码
				</view>
			</view>
		</view>
		<view class="password_box" v-if="type == 'top'">
			<view class="password_title">
                输入6位交易密码
                <view class="closeItem" @click="close">X</view>
            </view>
			<view class="password_num">
				<view class="password_zi" v-for="(item, index) in 6">
					<view :class="{'passwordOn':password[index]}"></view>
				</view>
			</view>
			<view class="digital_keyboard">
				<view class="keyboard_kuagn" v-for="(el,elindex) in numberBox">
					<view class="otherbg" v-if="el.id == 10"></view>
					<view class="delete" v-else-if="el.id == 12" @tap="deleteNum(el)"></view>
					<view v-else class="keyboard_num" @tap="clickNum(el)">{{el.num}} </view>
				</view>
			</view>
			<view style="width: 100%;height: 50rpx; "></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				value: '温馨提示'
			},
			data: {
				type: Object,
				value: {}
			},
		},
		data() {
			return {
				dataInfo:{},
				numberBox: [{
						id: 1,
						num: '1'
					},
					{
						id: 2,
						num: '2'
					},
					{
						id: 3,
						num: '3'
					},
					{
						id: 4,
						num: '4'
					},
					{
						id: 5,
						num: '5'
					},
					{
						id: 6,
						num: '6'
					},
					{
						id: 7,
						num: '7'
					},
					{
						id: 8,
						num: '8'
					},
					{
						id: 9,
						num: '9'
					},
					{
						id: 10,
						num: ''
					},
					{
						id: 11,
						num: '0'
					},
					{
						id: 12,
						num: ''
					},
				],
				password: '',
				type: 'center',
				tradePasswordType:null, //判断是否设置密码
				clickStatus:true ,// 防重复点击
                xNum: 0,
                xMoney: 0,
			}
		},

		 created(e) {
			this.dataInfo = this.data
			this.getCustomer()
			console.log('this.data', this.data)
            var xNum = 0
            this.data.holdEquityCardList.forEach(item => {
                if(item.cardCurrent){
                    xNum ++
                }
            })
            var award = parseFloat(this.data.award)
            this.xNum = xNum
            this.xMoney = Math.round(xNum * this.data.award * 100) / 100;  
            console.log('xNum',xNum)
            
		},
		methods: {
			async getCustomer(){
				var res = await this.$api.getCustomer()
				this.tradePasswordType = res.data.tradePasswordType
			},
			setPassword(){
				uni.navigateTo({
					url:'/pages/my/set-up/transaction-password/password-settings/password-settings?step=1&pathType=syFactory'
				})
			},
			// 支付判断 数字判断
			pay() {
				// 防重复点击
				if(this.clickStatus){
					this.clickStatus = false
					this.type = 'top'
				}
				setTimeout(()=>{
					this.clickStatus = true
				},1500)
				
			},
			// 设置密码
			close() {
				this.$emit('close')
			},
			// 完成交易密码输入事件
			clickNum(key) {
				if (this.password.length < 6) {
					this.password += key.num
					if (this.password.length === 6) {
						// 密码验证操作
						this.$emit('determine', this.password)
						// console.log(this.password,'37')
						// this.$.open('/trait/details');
					}
				}

			},
			// 删除交易密码
			deleteNum() {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1)
				}
			}
		}
	}
</script>

<style scoped>
	.dialog {
		position: fixed;
		width: 100%;
		height: calc(100% + 150rpx);
		top: -150rpx;
		z-index: 99;
	}
    .tou_dialog{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        background: rgba(0, 0, 0, 0.6);
    }
    .mat{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: top;
    }
	.dc {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.dialogBox {
		width: 630rpx;
		border-radius: 20rpx;
		position: relative;
		z-index: 999;
		background: #fff;

	}

	.dialogTop {
		margin: 0 auto;
		margin-top: -252rpx;
	}

	/* 弹窗组件 */
	.coding_box {
		padding-bottom: 60rpx;
		position: relative;
	}

	.closeItem {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 20rpx;
		top: 40rpx;
	}

	.coding_box .title {
		width: 85%;
		margin: 0 auto;
		text-align: center;
		padding-top: 60rpx;
		font-size: 36rpx;
		color: #222222;
		font-weight: 500;
	}

	.coding_box_item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 62rpx;
	}

	.coding_box_item .number {
		font-size: 56rpx;
		color: #FF3A3A;
	}

	.coding_box_item image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 12rpx;
	}

	.coding_box_item text {
		font-size: 36rpx;
		color: #222222;

	}

	/* 	.coding_box_item input{
		   color: #222222;
		   font-size: 44rpx;
		   width: 164rpx;
		   border-bottom: 2rpx solid #A7A7A7;
	}
	.coding_box_item .custom{
		   color: #1D46ED;
		   font-size: 30rpx;
		   margin-left: 28rpx;
	} */
	.coding_balance {
		width: 100%;
		margin-top: 32rpx;
		color: #555555;
		font-size: 30rpx;
		text-align: center;
	}

	.coding_but {
		width: 370rpx;
		height: 92rpx;
		background: linear-gradient(90deg, #2720DE 0%, #6F00FC 98.24%);
		border-radius: 8rpx;
		margin: 0 auto;
		font-size: 36rpx;
		color: #ffffff;
		line-height: 92rpx;
		text-align: center;
		margin-top: 60rpx;
	}

	/*  */
	.password_box {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 778rpx;
		background: #F5F5F6;
	}

	.password_title {
		background: #ffffff;
		font-size: 32rpx;
		color: #222222;
		width: 100%;
		text-align: center;
		padding: 40rpx 0;
	}

	.password_num {
		background: #ffffff;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

	}

	.password_zi:first-child {
		border-left: 2rpx solid #A5A8BB;
	}

	.password_zi {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 116rpx;
		height: 116rpx;
		border-top: 2rpx solid #A5A8BB;
		border-bottom: 2rpx solid #A5A8BB;
		border-right: 2rpx solid #A5A8BB;
	}

	.passwordOn {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		background: #222222;
	}

	.digital_keyboard {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding-top: 60rpx;
		background: #ffffff;
	}

	.keyboard_kuagn {
		font-size: 56rpx;
		color: #030303;
		width: 248rpx;
		height: 108rpx;
		background: #fff;

		border-top: 2rpx solid #F5F5F6;
		border-right: 2rpx solid #F5F5F6;
		/* border-bottom: 2rpx solid #F5F5F6; */
	}
	.delete {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: #F5F5F6 url('/static/index/activity/delete.png') no-repeat;
		background-size: 100% 100%;
	}
	.otherbg {
		width: 100%;
		height: 100%;
		background: #F5F5F6;
	}
	.keyboard_num {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.keyboard_num:active{
		background: rgba(0, 0, 0, 0.1);
	}
	/* news add */
	.coding_box_item_no{
		width: 100%;
		box-sizing: border-box;
		padding: 0 100rpx;
		font-size: 36rpx;
		font-weight: 600;
		text-align: center;
	}
	.but_no{
		padding: 15rpx 0;
		text-align: center;
		width: 300rpx;
		margin: 30rpx auto;
		background: #6F00FC;
		color: #fff;
		font-size: 32rpx;
		border-radius: 16rpx;
	}
    .status_box{
        width: 686rpx;
        height: 1000rpx;
        position: relative;
        z-index: 999;
    }
    .status_box .status_bg{
        position: absolute;
        top: 0;
        left: 0;
        width: 686rpx;
        height: 828rpx;
    }
    .status_box .status_bg image{
        width: 100%;
        height: 100%;
    }
    .status_ma{
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: -100rpx;
    }
    .status_ma .img{
        width: 280rpx;
        height: 260rpx;
        
    }
    .status_ma text{
        font-size: 44rpx;
        font-weight: 600;
        /* color: #3767FF; */
        background: linear-gradient(90deg, #3767FF 5.56%, #701CF9 97.69%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
    }
    .status_ma .succesImg{
        width: 500rpx;
        height: 360rpx;
        position: relative;
        margin-top: 28rpx;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .status_ma .succesImg .coverImg{
        width: 100%;
        height: 100%;
        
    }
    .status_ma .succesImg .b_kuan{
        position: absolute;
        left: 0;
        top: 0;
        width: 500rpx;
        height: 360rpx;
        z-index: 9;
    }
    .status_ma .succesImg .lieImg{
        position: absolute;
        left: 80px;
        top: -14rpx;
        width: 168rpx;
        height: 108%;
        z-index: 999;
    }
    .status_btn{
        display: flex;
        justify-content: center;
        margin-top: 80rpx;
        width: 100%;
        position: absolute;
        bottom: 0;
    }
    .status_btn .btn{
        width: 286rpx;
        height: 92rpx;
        border-radius: 8rpx;
        text-align: center;
        line-height: 92rpx;
        background: linear-gradient(90deg, #42BBFF 0%, #FF3CE7 98.24%);
        font-size: 32rpx;
        color: #fff;
    }
    .tips{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-left: 100rpx;
        box-sizing: border-box;
        margin-top: 20rpx;
    }
    .tips .text{
        margin-top: 6rpx;
        font-size: 32rpx;
        color: #222;
        height: 44rpx;
        line-height: 44rpx;
    }
</style>
